<!--
 * @Author: yantong 11608542+yan_tongone@user.noreply.gitee.com
 * @Date: 2023-01-05 17:47:30
 * @LastEditors: yantong 11608542+yan_tongone@user.noreply.gitee.com
 * @LastEditTime: 2023-01-06 17:34:37
 * @FilePath: \vue-admin-template-master\src\views\employees\component\UserInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
  <div class="user-info">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="140px"
      class="demo-ruleForm"
    >
      <el-row :gutter="10">
        <!-- 第一列 -->
        <el-col :span="10">
          <el-form-item label="工号" class="two">
            <el-input v-model="ruleForm.workNumber"></el-input>
          </el-form-item>
          <el-form-item label="姓名" class="two">
            <el-input v-model="ruleForm.companyName"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="ruleForm.mobile" disabled></el-input>
          </el-form-item>
        </el-col>
        <!-- 第二列 -->
        <el-col :span="10" class="rightCol">
          <el-form-item label="入职时间" class="two">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ruleForm.timeOfEntry"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="部门">
            <el-input v-model="ruleForm.departmentName"></el-input>
          </el-form-item>
          <el-form-item label="聘用形式">
            <el-select v-model="ruleForm.formOfEmployment" placeholder="请选择">
              <el-option
                v-for="item in formOfEmployment"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 员工头像 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="员工头像">
            <!-- 上传图片 -->
            <upload-view></upload-view>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 保存更新 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="savaEmployessDetail(detailId)">保存更新</el-button>
            <el-button>返回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- ================基础信息 ==================== -->
      <p>基础信息</p>
      <!-- 最高学历 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="最高学历">
            <el-select v-model="ruleForm.theHighestDegreeOfEducation" placeholder="请选择">
              <el-option
                v-for="item in theHighestDegreeOfEducation"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 员工照片 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="员工照片">
            <!-- 上传图片 -->
            <upload-view></upload-view>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 国家/地区 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="国家/地区">
            <el-select v-model="ruleForm.nationalArea" placeholder="请选择">
              <el-option
                v-for="item in nationalArea"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 护照号 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="护照号">
            <el-input v-model="ruleForm.passportNo" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 身份证号 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="身份证号">
            <el-input v-model="ruleForm.idNumber" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 籍贯 -->
      <el-row :gutter="10">
        <el-col :span="14">
          <el-form-item label="籍贯">
            <el-input v-model="ruleForm.nativePlace" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 民族 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="民族">
            <el-input v-model="ruleForm.nation" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!--婚姻状况 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="婚姻状况">
            <el-select v-model="ruleForm.maritalStatus" placeholder="请选择">
              <el-option
                v-for="item in maritalStatus"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!--生日 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="生日">
            <el-input v-model="ruleForm.birthday"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!--年龄 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="年龄">
            <el-input v-model="ruleForm.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!--星座 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="星座">
            <el-select v-model="ruleForm.constellation" placeholder="请选择">
              <el-option
                v-for="item in constellation"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!--血型 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="血型">
            <el-select v-model="ruleForm.bloodType" placeholder="请选择">
              <el-option
                v-for="item in bloodType"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 户籍所在地 -->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="户籍所在地">
            <el-input v-model="ruleForm.huAddress" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 政治面貌 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="政治面貌">
            <el-input v-model="ruleForm.politicalOutlook" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 入党时间 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="入党时间">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ruleForm.timeToJoinTheParty"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 存档机构 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="存档机构">
            <el-input
              v-model="ruleForm.archivingOrganization"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 子女状态 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="子女状态">
            <el-input
              v-model="ruleForm.stateOfChildren"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 子女有无商业险 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="子女有无商业险">
            <el-radio-group v-model="ruleForm.childrenRadio">
              <el-radio :label="0">有</el-radio>
              <el-radio :label="1">无</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 有无违法违纪状态 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="有无违法违纪状态">
            <el-input
              v-model="ruleForm.isThereAnyViolationOfLawOrDiscipline"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 有无重大病史 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="有无重大病史">
            <el-input
              v-model="ruleForm.areThereAnyMajorMedicalHistories"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--通讯信息-->
      <p>通讯信息</p>
      <!-- qq -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="qq">
            <el-input v-model="ruleForm.qq" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 微信 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="微信">
            <el-input v-model="ruleForm.wechat" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 现居住地 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="现居住地">
            <el-input
              v-model="ruleForm.placeOfResidence"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 通讯地址 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="通讯地址">
            <el-input
              v-model="ruleForm.postalAddress"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 联系手机 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="联系手机">
            <el-input
              v-model="ruleForm.contactTheMobilePhone"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 个人邮箱 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="个人邮箱">
            <el-input v-model="ruleForm.personalMailbox" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 紧急联系人 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="紧急联系人">
            <el-input
              v-model="ruleForm.emergencyContact"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 紧急联系电话 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="紧急联系电话">
            <el-input
              v-model="ruleForm.emergencyContactNumber"
              placeholder="11位字符"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!--账号信息-->
      <p>账号信息</p>
      <!-- 社保电脑号 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="社保电脑号">
            <el-input
              v-model="ruleForm.socialSecurityComputerNumber"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 公积金账号 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="公积金账号">
            <el-input
              v-model="ruleForm.providentFundAccount"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 银行卡号 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="银行卡号">
            <el-input
              v-model="ruleForm.bankCardNumber"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 开户行 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="开户行">
            <el-input
              v-model="ruleForm.openingBank"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!--教育信息-->
      <p>教育信息</p>
      <!-- 学历类型 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="学历类型">
            <el-select v-model="ruleForm.educationalType" placeholder="请选择">
              <el-option
                v-for="item in educationalType"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 毕业学校 -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="毕业学校">
            <el-input
              v-model="ruleForm.GraduationSchool"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 入学时间 -->
      <el-row :gutter="10">
        <el-col :span="9">
          <el-form-item label="入学时间">
            <el-date-picker
              type="date"
              placeholder="请输入时间"
              v-model="ruleForm.enrolmentTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 毕业时间 -->
      <el-row :gutter="10">
        <el-col :span="9">
          <el-form-item label="毕业时间">
            <el-date-picker
              type="date"
              placeholder="请输入时间"
              v-model="ruleForm.graduationTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 专业 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="专业">
            <el-input v-model="ruleForm.major" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!--从业信息-->
      <p>从业信息</p>
      <!-- 学历类型 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="上家公司">
            <el-input v-model="ruleForm.homeCompany" placeholder="请输入">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 毕业学校 -->
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="昵称">
            <el-input
              v-model="ruleForm.title"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 有无竞业限制 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="有无竞业限制">
            <el-input
              v-model="ruleForm.isThereAnyCompetitionRestriction"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 备注 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input
              type="textarea"
              v-model="ruleForm.remarks"
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 保存更新 -->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="savaEmployessDetail(detailId)">保存更新</el-button>
            <el-button>返回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!--  -->
    </el-form>
  </div>
</template>

<script>
import {getEmployessDetail,savaEmployessDetail} from '@/api/employees'
import UploadView from './UploadView.vue';
export default {
  name: "Com",
  data() {
    return {
      ruleForm: {
        companyName: "",  //姓名
        workNumber:"",  //工号
        timeOfEntry:"",  //入职时间
        departmentName:"" ,//部门
        mobile:"",  //手机号
        formOfEmployment:"",  //聘用形式
        staffPhoto:"",  //头像
        theHighestDegreeOfEducation:"",  //最高学历
        nationalArea:"",  //国家
        passportNo:"",  //护照
        idNumber:"",  //身份证号
        nativePlace:"",  //籍贯
        nation:"",  //民族
        maritalStatus:"", //婚姻状况
        birthday:"",  //生日
        age:"",//年龄
        constellation:"",   //星座
        bloodType:"",   //血缘
        huAddress:"",  //户籍所在地
        politicalOutlook:"",  //政治面貌
        timeToJoinTheParty:"",  //入党时间
        archivingOrganization:"",  //存档机制
        stateOfChildren:"",  //子女状态
        isThereAnyViolationOfLawOrDiscipline:"",   //有无违法违纪状态
        areThereAnyMajorMedicalHistories:"",  //有无重大疾病
        childrenRadio: 0,
        qq:"",  //qq
        wechat:"微信",//微信
        placeOfResidence:"现居住地",
        postalAddress:"通讯地址",
        contactTheMobilePhone:"",//联系手机
        personalMailbox:"",//邮箱
        emergencyContact:"",//紧急联系人
        emergencyContactNumber:"",  //紧急联系电话
        socialSecurityComputerNumber:"",  //社保电脑号
        providentFundAccount:"",//公积金账号
        bankCardNumber:"",  //银行卡号
        openingBank:"",//开户行

        educationalType:"",   //学历类型


        GraduationSchool:"",  //毕业学校
        enrolmentTime:"",  //入学时间
        graduationTime:"",  //毕业时间
        major:"", //专业

        homeCompany:"",  //上家公司
        title:"",//昵称
        isThereAnyCompetitionRestriction:"",//竞争
        remarks:"",//备注
      },
      formOfEmployment:['正式','非正式'],
      theHighestDegreeOfEducation:['小学','初中','高中','大专','本科','硕士','博士','研究生'],
      nationalArea:['中国','日本','美国','俄罗斯','英国','意大利'],
      maritalStatus:['未婚','已婚','离异','丧偶'],
      constellation:['白羊座','摩羯座','巨蟹座','水瓶座','处女座','金牛座'],
      bloodType:['A型','B型','AB型','其他'],
      educationalType:['统招','自考','成考']
    };
  },
  props:['detailId'],
  components: {UploadView},
  created(){
    console.log(this.detailId,"id");
  },
  computed: {},

  mounted() {
    // 获取员工详情的个人信息
    this.getEmployessDetail(this.detailId)
  },

  methods: {
    // 获取员工详情的个人信息
    async getEmployessDetail(id){
      let res=await getEmployessDetail({id})
      console.log(res,"resassassaasas");
      this.ruleForm.companyName=res.username
      this.ruleForm.workNumber=res.companyId
      this.ruleForm.timeOfEntry=res.timeOfEntry
      this.ruleForm.departmentName=res.departmentName
      this.ruleForm.mobile=res.mobile    
      this.ruleForm.formOfEmployment=res.formOfEmployment    
      this.ruleForm.staffPhoto=res.staffPhoto
    },

    async savaEmployessDetail(id){
      let res=await savaEmployessDetail({id,...this.ruleForm})
      this.$message.success('更新成功')
    }
  },
  watch: {},
  mixins: [],
};
</script>
<style scoped lang="scss">
.user-info {
  padding: 0 40px;
  box-sizing: border-box;
  .rightCol {
    text-align: right;
    float: right;
  }
  .two {
    width: 90%;
  }
  .el-select {
    width: 100%;
  }
}
</style>
